<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hui{
            width: 100%;
            /* height: 100%; */
            background-color: rgb(89, 91, 91);
            opacity: 0.4;
            float: left;
        }
        .da{
            width: 1000px;
            height: 500px;
        }
        .an{
            width: 100px;
            height: 50px;
            background-color: red;
            color: white;
        }
        .xiao{
            width: 150px;
            height: 150px;
            border: 5px solid black;
        }
        .rx{
            width: 500px;
            height: 300px;
            background-color: white;
            float: right;
            margin-right: 100px;
            margin-bottom: 100px;
            padding-top: 50px;
            border: 50px solid #9a939b;
            display: none;
        }
        .red{
            width: 50px;
            height: 50px;
            color: white;
            background-color: red;
        }
        .yello{
            width: 50px;
            height: 50px;
            color: black;
            background-color: yellow;
        }
        .bule{
            width: 50px;
            height: 50px;
            color: white;
            background-color: #5a94ef;
        }
        .k2{
            width: 50px;
            height: 30px; 
            margin-top: 10px;
        }
        .k3,.k4{
            width: 50px;
            height: 30px; 
        }
        .g2{
            width: 50px;
            height: 30px; 
            margin-top: 10px;
        }
        .g3,.g4{
            width: 50px;
            height: 30px; 
        }
        .hf,.qd{
            width: 80px;
            height: 50px;
            margin-top: 30px;
            margin-right: 30px;
            background-color: #002952;
            color: white;
        }
    </style>
</head>
<body>
    <!-- <div> -->
    <div class="hu">
        <div class="da" style="opacity: 1;">
            <h1>请为下面的DIV设置样式:<button class="an">点击设置</button></h1>
            <div class="xiao"></div>
        </div>
        <div class="rx">
            <center>
            <b>选择背景色:<button class="red">红</button><button class="yello">黄</button><button class="bule">蓝</button></b><br>
            <b>选择宽(px):<button class="k2">200</button><button class="k3">300</button><button class="k4">400</button></b><br>
            <b>选择高(px):<button class="g2">200</button><button class="g3">300</button><button class="g4">400</button></b><br>
            <button class="hf">恢复</button><button class="qd">确定</button>
            </center>
        </div>
    </div>
<!-- </div> -->
</body>
</html>
<script>
    var hbg=document.querySelector(".hu")
    var rxj=document.querySelector(".rx")
    var szan=document.querySelector(".an")
    var xiao=document.querySelector(".xiao")
    var red=document.querySelector(".red")
    var yello=document.querySelector(".yello")
    var blue=document.querySelector(".bule")
    var k2=document.querySelector(".k2")
    var k3=document.querySelector(".k3")
    var k4=document.querySelector(".k4")
    var g2=document.querySelector(".g2")
    var g3=document.querySelector(".g3")
    var g4=document.querySelector(".g4")
    var hf=document.querySelector(".hf")
    var qd=document.querySelector(".qd")
    var rzt=0;
    szan.onclick=function(){
        if(rzt==0){
            hbg.className='hui'
            rxj.style.display='block'
            rzt=1
        }else{
            hbg.className='hu'
            rxj.style.display='none'
            rzt=0
        }
    }
    red.onclick=function(){
        xiao.style.backgroundColor='red'
    }
    yello.onclick=function(){
        xiao.style.backgroundColor='yellow'
    }
    blue.onclick=function(){
        xiao.style.backgroundColor='blue'
    }
    k2.onclick=function(){
        xiao.style.width= '200px';
    }
    k3.onclick=function(){
        xiao.style.width= '300px';
    }
    k4.onclick=function(){
        xiao.style.width= '400px';
    }
    g2.onclick=function(){
        xiao.style.height= '200px';
    }
    g3.onclick=function(){
        xiao.style.height= '300px';
    }
    g4.onclick=function(){
        xiao.style.height= '400px';
    }
    qd.onclick=function(){
        if(rzt==1){
            hbg.className='hu'
            rxj.style.display='none'
            rzt=0
        }
    }
    hf.onclick=function(){
        // xiao.className="xiao1"
        xiao.style.width= '150px';
        xiao.style.height= '150px';
        xiao.style.border='5px solid black';
        xiao.style.backgroundColor='white'
    }
</script>